let $login = $(".clear")
let username = $(".input-login").val()
let password = $(".input-pasword").val()
let $login_btn = $(".login")
let login_tip = $(".login_tip")

$login.children().eq(0).on("click",function(event){
    event.stopPropagation()
    $(this).css({
        color:"#f88000"
    })
    $(this).children().css({
        display:"block"
    })
    $(this).next().css({
        color:"#333"
    })
    $(this).next().children().css({
        display:"none"
    })
    $(".er").css({
        display:"block"
    })
    $(".login").css({
        display:"none"
    })
})
$login.children().eq(1).on("click",function(){
    $(".login").css({
        display:"block"
    })
    $(".er").css({
        display:"none"
    })
    $(this).css({
        color:"#f88000"
    })
    $(this).children().css({
        display:"block"
    })
    $(this).prev().css({
        color:"#333"
    })
    $(this).prev().children().css({
        display:"none"
    })
})
$login.children().eq(1).on("mouseover",function(){
    $(this).css({
        color:"#f88000"
    })
})
$login.children().eq(0).on("mouseover",function(){
    $(this).css({
        color:"#f88000"
    })
})
$login.children().eq(1).on("mouseout",function(){
    $(this).css({
        color:"#333"
    })
})
$login.children().eq(0).on("mouseout",function(){
    $(this).css({
        color:"#333"
    })
})


$(".input-login").next().on("click",function(event){
    event.stopPropagation()
    $(this).prev().trigger("focus")
    $(this).css({
        display:"none"
    })
})
$(".input-login").on("blur",function(){
    if(!$(this).val()){
        $(this).next().css({
            display:"block"
        })
    }
})
$(".input-password").on("click",function(event){
    event.stopPropagation()
})
$(".input-login").on("click",function(event){
    event.stopPropagation()
})
$(".input-password").next().on("click",function(event){
    event.stopPropagation()
    $(this).prev().trigger("focus")
    $(this).css({
        display:"none"
    })
})
$(".input-password").on("blur",function(){
    if(!$(this).val()){
        $(this).next().css({
            display:"block"
        })
    }
})
$login_btn.on("click",function(event){
    event.stopPropagation()
    let username = $(".input-login").val()
    let password = $(".input-password").val()
    load(username,password)
    .done(function(data){
        switch (data.code) {
            case 0:
                Tip(data.message, data.code)
                break;
            case 1:
                Tip(data.message, data.code)
                setTimeout(function () {
                    location.href = "./index.html"
                }, 2000)
                setCookie("userid", data.user.id);
                setCookie("token", data.token, {
                    expires: 1
                });
                break;
        }
    })
    
})


function load(a,b) {
    let options = {
          url : "http://127.0.0.1:8888/users/login",
          type : "POST",
          data: {
                username:a,
                password:b
          },
          headers:{
            "Content-Type":"application/x-www-form-urlencoded"
        },
          dataType : "json"
    }
    return  $.ajax(options);
}

function Tip(msg, code) {
    if (code === 1) {
        var a = "alert-danger"
        var r = "alert-success"
    } else {
        var a = "alert-success"
        var r = "alert-danger"
    }
    console.log(a, r);
    login_tip[0].style.display = "block";
    login_tip[0].classList.remove(a);
    login_tip[0].classList.add(r);
    login_tip[0].innerHTML = msg;
    setTimeout(function () {
        login_tip[0].style.display = "none";
    }, 2000)
}